<template>
  <navbar :notLeftMenu="true"></navbar>
  <div class="page-index">
    <div class="module-wrapper">
      <div class="module">
        <div class="item" v-for="(item, index) in routes" :key="index">
          <el-card
            shadow="hover"
            @click="cardClick(item)"
            :class="item.meta.bgColor"
          >
            <span>{{ item.meta.title }}</span>
            <svg-icon
              class-name="svgIconClass"
              :icon-class="item.meta.homeIcon"
              class="svgIconClass"
            />
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Navbar from '@/components/Navbar'
  // import { mapGetters } from 'vuex'
  import { computed } from '@vue/runtime-core'
  import { useStore } from 'vuex'
  import { useRouter, useRoute } from 'vue-router'

  export default {
    // computed: {
    //   ...mapGetters(['permission_routes']),
    // },
    components: { Navbar },
    setup() {
      const store = useStore()
      const routes = computed(() => {
        // 有子类的配置上首页
        return store.getters.permission_routes.filter((item) => {
          return Array.isArray(item.children) && item.children.length > 0
        })
      })
      const router = useRouter()
      const cardClick = function (item) {
        if (Array.isArray(item.children) && item.children.length > 0) {
          router.push({ name: item.children[0].name })
        }
      }
      const returnColor = function (index) {
        const tmp = {
          0: 'color-1',
          1: 'color-2',
          2: 'color-4',
          3: 'color-7',
          4: 'color-6',
          5: 'color-10',
          6: 'color-8',
          7: 'color-12',
        }
        return tmp[index]
      }
      const returnIcon = computed(() => {
        return (index) => {
          if (index >= 5) return 'home5'
          return 'home' + index
        }
      })

      const route = useRoute()
      // if (route.query.name)
      console.log('route =' + JSON.stringify(route.query))
      return {
        // routes,
        cardClick,
        routes,
        returnColor,
        returnIcon,
        // hasAuth,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .page-index {
    font-size: 12px;
    top: 50px;
    .module-wrapper {
      height: calc(100vh - 50px);
      margin-top: 0px;
      display: flex;
      align-items: center;
      overflow-y: auto;
      // width: -webkit-fill-available;
    }

    .module {
      width: 100vw;
      padding: 2vw 13vw 0vw 13vw;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
      background-size: cover;

      .item {
        width: 24.2vw;
        height: 13.45vw;
        box-sizing: border-box;
        padding: 1%;
        // background-color: red;

        .el-card {
          width: 100%;
          height: 100%;
          font-size: 30px;
          color: #fff;

          :deep(.el-card__body) {
            height: 100%;
            position: relative;
            .svgIconClass {
              position: absolute;
              right: 22px;
              bottom: 12px;
              height: 3vw;
              width: 3vw;
            }
          }
        }

        a {
          display: block;
          height: 100%;
          background-position: center;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .block {
          background-color: transparent;
        }

        .management {
          // background-image: url('../../assets/imgs/index/01.png');
        }

        .query {
          // background-image: url('../../assets/imgs/index/02.png');
        }

        .evaluation {
          // background-image: url('../../assets/imgs/index/03.png');
        }

        .analysis {
          // background-image: url('../../assets/imgs/index/04.png');
        }

        .knowledge {
          // background-image: url('../../assets/imgs/index/05.png');
        }

        .password {
          // background-image: url('../../assets/imgs/index/06.png');
        }

        .screening {
          // background-image: url('../../assets/imgs/index/07.png');
        }
      }
    }

    .btns {
      display: flex;
      align-items: center;

      .btn + .btn {
        margin-left: 20px;
      }
    }

    .version {
      color: #333;
      width: 100%;
      text-align: center;
      position: fixed;
      bottom: 2rem;

      h3 {
        font-size: 14px;
        font-weight: bold;
        color: #999;
      }

      p {
        font-size: smaller;
      }
    }
  }

  @media screen and (min-width: 1400px) {
    .page-index {
      font-size: 16px;
    }
  }

  @media screen and (max-width: 1200px) {
    .mobile {
      .page-index {
        font-size: 18px;

        .module {
          width: 53em;
        }
      }
    }
  }

  @media screen and (max-width: 998px) {
    .mobile {
      .page-index {
        font-size: 14px;

        .module {
          width: 53em;
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    .mobile {
      .page-index {
        font-size: 12px;

        .module {
          width: 53em;
        }
      }
    }
  }
</style>
